interface AvatarProps {
  name: string;
  color?: string;
  size?: 'sm' | 'md' | 'lg';
  className?: string;
}

export function Avatar({ name, color, size = 'md', className = '' }: AvatarProps) {
  const sizeClasses = {
    sm: 'w-8 h-8 text-sm',
    md: 'w-10 h-10 text-base',
    lg: 'w-12 h-12 text-lg',
  };
  
  // 获取用户名的首字母
  const getInitials = (name: string) => {
    return name
      .split(' ')
      .map(word => word.charAt(0))
      .join('')
      .toUpperCase()
      .slice(0, 2);
  };
  
  const initials = getInitials(name);
  
  const classes = `${sizeClasses[size]} rounded-full flex items-center justify-center font-medium text-white ${className}`;
  
  return (
    <div
      className={classes}
      style={{ backgroundColor: color }}
      title={name}
    >
      {initials}
    </div>
  );
}